﻿<template>
  <MdPreview
    :modelValue="sanitizedContent"
    v-bind="$attrs"
    :theme="theme"
    :showCodeRowNumber="showCodeRowNumber"
    :previewTheme="previewTheme"
    :codeTheme="codeTheme"
  />
</template>

<script setup>
import { computed } from "vue";
import { MdPreview } from "md-editor-v3";
import { sanitizeHtml, devSecurityCheck } from "@/utils/security/markdown";

/**
 * 安全的Markdown预览组件
 * 自动对内容进行XSS防护处理
 */

const props = defineProps({
  modelValue: {
    type: String,
    default: "",
  },
  theme: {
    type: String,
    default: "light",
  },
  showCodeRowNumber: {
    type: Boolean,
    default: true,
  },
  previewTheme: {
    type: String,
    default: "github",
  },
  codeTheme: {
    type: String,
    default: "github",
  },
  // 是否启用严格的安全模式
  strictMode: {
    type: Boolean,
    default: true,
  },
  // 是否在开发环境下进行安全检查
  devCheck: {
    type: Boolean,
    default: true,
  },
});

// 对内容进行安全处理
const sanitizedContent = computed(() => {
  if (!props.modelValue) {
    return "";
  }

  // 开发环境下进行安全检查
  if (props.devCheck && import.meta.env.DEV) {
    devSecurityCheck(props.modelValue);
  }

  // 如果启用严格模式，对内容进行清理
  if (props.strictMode) {
    // 对于Markdown内容，我们需要先渲染再清理
    // 这里我们直接返回原内容，让md-editor-v3的全局配置处理
    return props.modelValue;
  }

  return props.modelValue;
});
</script>

<style scoped>
/* 继承父组件的样式 */
:deep(.md-editor-preview) {
  background-color: transparent;
}

:deep(.md-editor-preview-wrapper) {
  padding: 0;
}
</style>
